<template>
  <div
    :style="{
      display: closed ? 'none' : 'block'
    }"
    class="pt-dialog"
    @click.self="maskClick"
  >
    <div
      class="pt-dialog__inner"
      ref="dialogInner"
      :style="{
        width: dWidth,
        height: dHeight,
        marginTop
      }"
    >
      <div class="pt-dialog__header">
        <span class="title_icon"></span>
        <span class="title">{{title}}</span>
        <span class="action">
          <pt-button
            v-if="fullScreenBtn"
            type="text"
            @click="fullScreen = !fullScreen"
            :icon="fullScreen ? 'unzoom' : 'zoom'"
            :iconSize="14"
          ></pt-button>
          <pt-button type="text" @click="closed = true" icon="close" :iconSize="14"></pt-button>
        </span>
      </div>
      <div
        class="pt-dialog__body"
        :style="{
        height: noFooter ? 'calc(100% - 60px)' : 'calc(100% - 121px)',
        ...bodyStyle
      }"
      >
        <slot></slot>
      </div>
      <div v-if="!noFooter" class="pt-dialog__footer">
        <slot v-if="$slots.footer" name="footer"></slot>
        <div v-else class="footer-inner">
          <pt-button @click="closed = true">取消</pt-button>
          <pt-button class="btn_sure" @click="confirmClick">确定</pt-button>
        </div>
      </div>
    </div>
    <div class="pt-background__mask"></div>
  </div>
</template>

<script>
export default {
  name: "ptDialog",
  props: {
    noFooter: Boolean,
    visible: {
      type: Boolean,
      default: false
    },
    mask: {
      type: Boolean,
      default: true
    },
    appToBody: {
      type: Boolean,
      default: false
    },
    width: String,
    height: String,
    title: {
      type: String,
      default: "对话框标题"
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    fullScreenBtn: {
      type: Boolean,
      default: false
    },
    bodyStyle: {
      type: Object,
      default () {
        return {};
      }
    },
    marginTop: {
      type: String,
      default: ""
    }
  },
  data () {
    return {
      closed: true,
      fullScreen: false,
      dWidth: "",
      dHeight: ""
    };
  },
  watch: {
    visible (nVal) {
      this.closed = !nVal;
      if (!nVal) {
        this.$emit("close");
      }
    },
    closed (nVal) {
      this.$emit("update:visible", !nVal);
    },
    fullScreen (nVal) {
      if (nVal) {
        this.innerMarginTop = 0;
        this.dWidth = "100%";
        this.dHeight = "100%";
      } else {
        this.dWidth = "";
        this.dHeight = "";
        this.$nextTick(() => {
          this.innerMarginTop = (window.innerHeight - this.$refs.dialogInner.clientHeight) / 2;
        });
      }
    }
  },
  created () {
    this.dWidth = this.width;
    this.dHeight = this.height;
  },
  mounted () {
    window.addEventListener("resize", () => {
      if (this.fullScreen || !this.$refs.dialogInner) {
        return;
      }
      this.innerMarginTop = (window.innerHeight - this.$refs.dialogInner.clientHeight) / 2;
    });
  },
  methods: {
    maskClick () {
      if (this.closeOnClickModal) {
        this.closed = true;
      }
    },
    confirmClick () {
      // this.closed = true
      this.$emit("confirm");
    }
  }
};
</script>

<style lang="less" scoped>
// 对话框
.pt-dialog {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
}
.pt-dialog__inner {
  position: relative;
  width: 30%;
  height: 300px;
  margin: 0 auto 50px;
  border-radius: 5px;
  background-color: @bgColor3;
  z-index: 1111;
  margin-top: 15vh;
}
.pt-dialog__header {
  line-height: 60px;
  height: 60px;
  border-bottom: 1px solid @bgColor2;
  padding: 0 20px;
  .title_icon {
    display: inline-block;
    border: 7px solid transparent;
    .borderColor(border-left-color);
  }
  .title {
    font-size: 16px;
    font-weight: 500;
    .color();
  }
  .action {
    float: right;
    button + button {
      margin-left: 15px;
    }
  }
  .pt-button {
    padding: 0;
    line-height: 14px;
  }
}
.pt-dialog__body {
  font-size: 16px;
  padding: 20px;
  color: @fColor2;
  overflow-y: auto;
  overflow-x: hidden;
}
.pt-dialog__footer {
  border-top: 1px solid @bgColor2;
  padding: 9px 20px;
  .footer-inner {
    text-align: center;
    .btn_sure {
      color: white;
      .bgColor();
    }
    button {
      height: 38px;
      margin-left: 20px;
      font-size: 14px;
      &:nth-child(1) {
        margin-left: 0;
      }
    }
  }
}
.pt-background__mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.5;
  z-index: 999;
}
</style>